import React, {Component} from 'react';
// import './01-index.css'

class App extends Component {
    state = {
        list: [
            {
                id:1,
                name:'1111',
                ischeck:false,
            },{
                id:2,
                name:'2222',
                ischeck:false,
            },
        ],
        inputValue:'',
    }

    render() {
        return (
            <div>
                <input value={this.state.inputValue} onChange={(event)=>{
                    this.setState({
                        inputValue:event.target.value
                    })
                }}/>
                <button onClick={() => {
                    this.getAdd()
                }}>添加
                </button>
                <br/>
                <div>
                    <ul>
                        {
                            this.state.list.map((item, index) =>
                                <li key={item.id}>
                                    <input type="checkbox" checked={item.ischeck} onChange={()=>{
                                        this.handcheck(index)
                                    }}/>
                                    <span style={{
                                        textDecoration:item.ischeck?'line-through':''
                                    }}>{item.name}</span>

                                    <button onClick={() => {
                                        this.getDelete(item, index)
                                    }}>删除
                                    </button>
                                </li>
                            )
                        }
                    </ul>
                </div>
            </div>
        );
    }

    //添加
    getAdd() {
        let newlist = []
        newlist.push({
            id:Math.random()*100000000,
            name:this.state.inputValue,
            ischeck:false,
        })
        this.setState(
            {
                list: [...this.state.list, ...newlist],
                inputValue:"",
            }
        )
    }

    //删除
    getDelete(item, index) {
        let arr = [...this.state.list]
        arr.splice(index, 1)
        this.setState(
            {
                list: arr
            }
        )
    }

    handcheck(index){
        let newlist = [...this.state.list]
        newlist[index].ischeck=!newlist[index].ischeck
        this.setState({
            list:newlist
        })
    }
}

export default App;
